<template>
  <div class="layer-manage">
    <div class="head">
      <el-button
        type="text"
        class="item-button"
        @click="showMenu = !showMenu"
      >
        <span> 专题图层 </span>
      </el-button>
      <!-- <span
        class="item-menu"
        @click="showMenu = !showMenu"
      >
        <img src="../assets/svg/menu.svg">
      </span> -->
      <el-button
        type="text"
        class="item-button"
        @click="reset"
      >
        <span> 重置 </span>
      </el-button>
    </div>
    <el-checkbox-group
      v-show="showMenu"
      v-model="checkedMenus"
    >
      <el-menu
        :collapse="false"
        background-color="#000"
        text-color="#fff;"
        default-active="666"
        :unique-opened="false"
        active-text-color="#fff"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item
          v-for="route in menuList"
          :key="route.menuId"
          :item="route"
        />
      </el-menu>
    </el-checkbox-group>
  </div>
</template>

<script>
import SidebarItem from './SidebarItem';

export default {
  components: { SidebarItem },
  props: {
    menuList: {
      default () {
        return [];
      },
      type: Array
    }
  },
  data () {
    return {
      showMenu: true,
      checkedMenus: []
    };
  },
  watch: {
    checkedMenus: {
      deep: true,
      handler (nv, ov) {
        this.updateCheckState();
      }
    }
  },
  methods: {
    reset () {},
    // 勾选父级 子级的联动效果
    updateCheckState () {
      this.$emit('changeLayerVisibility', this.checkedMenus);
    }
  }
};
</script>
<style lang="less">
.layer-manage {
  .el-submenu__title {
    color: #fff;
  }
  & .el-menu-item,
  & .el-submenu__title {
    height: 32px;
    line-height: 32px;
  }
  .el-checkbox {
    color: #fff;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #fff;
  }
}
</style>
<style scoped>
.layer-manage {
  width: 200px;
  border: 1px solid #ccc;
  position: fixed;
  background-color: #fff;
  top: 200px;
  left: 553px;
}
</style>
